<template>
	<!-- 新房详情页面 -->
	<view class="newdetail-content">
		<!--轮播图  -->
		<swiper class="swiper_content" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="item in curHouseDetail.images" :key="item" >
				<view class="swiper-item">
					<image :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
		<!--/轮播图  -->
		<view class="infotext-content">
			<!-- 房屋详细数据 -->
			<view class="houseinfo">
				<view class="infohead">
					<view class="infohead-left">
						<view class="title">{{curHouseDetail.name}}</view>
						<view class="state">在售</view>
					</view>
					<view class="interest" @click="changeinterest">
						<uni-icons v-if="!interest" type="heart" size="35"></uni-icons>
						<uni-icons v-else type="heart" size="35" color="red"></uni-icons>
						<text>{{interest?"取消":"关注"}}</text>
					</view>
				</view>
				<view class="infoprice">
					<view class="infoprice-item">
						<view class="price">{{curHouseDetail.price}}元/m²</view>
						<view class="infopricetext">参考均价</view>
					</view>
					<view class="infoprice-item">
						<view class="price">{{Math.floor((curHouseDetail.price*curHouseDetail.minArea)/10000)}}-{{Math.floor((curHouseDetail.price*curHouseDetail.maxArea)/10000)}}万/套</view>
						<view class="infopricetext">参考总价</view>
					</view>
					<view class="infoprice-item">
						<view class="price">{{curHouseDetail.minArea}}-{{curHouseDetail.maxArea}} m²</view>
						<view class="infopricetext">建面</view>
					</view>
				</view>
				<view class="info-other">
					<view class="otherfirst info-other-item">
						<image class="otherfirst-icon" src="../../static/tabbar/home.png" mode=""></image>
						<text>住宅：{{curHouseDetail.price}}元/m²</text>
					</view>
					<view class="info-other-item">开盘时间：{{toConvertTime(curHouseDetail.openTime)}}</view>
					<view class="info-other-item">地址：{{curHouseDetail.address}}</view>
				</view>
			</view>
			<!-- 小区介绍 -->
			<view class="Introduction-community">
				<view class="">小区介绍</view>
				<view class="">
					{{curHouseDetail.introduction}}
				</view>
			</view>
			<!-- 专车看房 -->
			<view class="car-viewing">
				<view class="sectiontitle">专车看房</view>
				<view class="reservation-car">
					<uni-icons type="cart" size="50" color="#2f84b4"></uni-icons>
					<view class="">免费专车接送贴心到家</view>
					<text>预约</text>
				</view>
			</view>
			<!-- 新房推荐 -->
			<view class="house-recommendation">
				<view class="sectiontitle">推荐新房</view>
				<view class="newhouselist-item" v-for="(item,index) in newhouselistInfo" :key="index">
					<houseinfo-list :houseData="item" :housestyle="0"></houseinfo-list>
				</view>
			</view>
		</view>
		<!-- 底部功能 -->
		<view class="footFunction">
			<detail-bottom :managerInfo = "managerInfo"></detail-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			this.currentId=option.id;
			this.getHouseDetail(option.id);
			this.getNewHouseData();//获取推荐新房数据
		},
		data() {
			return {
				interest:false,//关注状态
				currentId:"",//当前id
				curHouseDetail:"",
				// 推荐新房列表信息
				newhouselistInfo:[],
        // 经纪人信息
        managerInfo:{}
				
			}
		},
		methods: {
			//改变关注状态
			changeinterest(){
				this.interest=!this.interest;
			},
			async getHouseDetail(cur_id){
				const {data} =await uni.$http.get('/building/one',{id:cur_id})
				this.curHouseDetail=data.data
        this.getManager(data.data.brokers[0])
			},
			//转换时间戳为年月日
			toConvertTime(timestamp){
				// 时间戳 
				// 此处时间戳以毫秒为单位
				let date = new Date(timestamp);
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				let  GMT =  Year + '-' + Moth + '-' + Day  //+ '   '+ Hour +':'+ Minute  + ':' + Sechond;
				 return GMT;
			},
			// 请求新房推荐数据
			async getNewHouseData(){
				const {data:res}=await uni.$http.get('/building/page',{pageNo:1,pageSize:50,recommend:true,new:true});
				this.newhouselistInfo=res.data.records.filter((item)=>{
					return item.id!=this.currentId;
				})
				
			},
      // 获取经纪人信息
     async getManager(id) {
     const {data} =  await uni.$http.get('/broker/one',{id})
     this.managerInfo = data.data
        
      }
		}
	}
</script>

<style lang="scss" scoped>
	.newdetail-content{
		width: 100%;
		height: 100%;
		position: relative;
		background-color: #f4f5f4;
		.swiper_content{
			width: 100%;
			height: 360rpx;
			.swiper-item{
				width: 100%;
				height: 100%;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		.infotext-content{
			position: absolute;
			left: 0;
			top: 300rpx;
			width: 96%;
			margin: 0 2%;
			padding-bottom: 170rpx;
			.houseinfo{
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 40rpx 20rpx 20rpx 20rpx;
				.infohead{
					width: 100%;
					display: flex;
					justify-content: space-between;
					padding:0rpx 0 10rpx 0 ;
					.infohead-left{
						display: flex;
						.title{
							font-size: 40rpx;
							color: #000000;
							font-weight: bold;
						}
						.state{
							    color: #ffffff;
							   width: 100rpx;
							       height: 55rpx;
							       line-height: 55rpx;
							    text-align: center;
							    border-radius: 10rpx;
							    background-color: #737477;
							    margin-left: 20rpx;
						}
					}
					.interest{
						margin-right: 40rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						color: #000000;
						image{
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 10rpx;
						}
					}
				}
				.infoprice{
					display: flex;
					justify-content: space-between;
					.infoprice-item{
						display:flex;
						flex-direction: column;
						.price{
							font-size: 32rpx;
							font-weight: 400;
							color: #fc1824;
						}
						.infopricetext{
							font-size: 25rpx;
							color:#e0e1e0 ;
						}
					}
				}
				.info-other{
					font-size: 32rpx;
					color: #000000;
					font-weight: 400;
					.otherfirst{
						margin-top: 10rpx;
						display: flex;
						.otherfirst-icon{
							width: 40rpx;
							height: 40rpx;
						}
					}
					.info-other-item{
						margin-bottom: 10rpx;
					}
				}
			}
			.Introduction-community{
				margin-top: 30rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 30rpx 20rpx 30rpx 20rpx;
			}
			.car-viewing{
				margin-top: 30rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 30rpx 20rpx 30rpx 20rpx;
				.sectiontitle{
					font-size: 40rpx;
					color: #000000;
					font-weight: 400;
				}
				.reservation-car{
					margin-top: 25rpx;
					font-size: 35rpx;
					color: #000000;
					font-weight: 400;
					display: flex;
					justify-content: space-between;
					background:#9cccee ;
					padding: 40rpx 15rpx 40rpx 20rpx;
					image{
						width: 100rpx;
						height: 100rpx;
					}
					view{
						width:205rpx ;
					}
					text{
						width: 250rpx;
						height: 110rpx;
						background: #3184b4;
						text-align: center;
						line-height: 110rpx;
						color: #ffffff;
						border-radius: 10rpx;
					}
				}
			}
			.house-recommendation{
				margin-top: 30rpx;
				width: 94%;
				border-radius: 10rpx;
				background-color: #ffffff;
				padding: 30rpx 20rpx 30rpx 20rpx;
				.sectiontitle{
					font-size: 40rpx;
					color: #000000;
					font-weight: 400;
				}
				.newhouselist-item{
					margin-top: 40rpx;
				}
			}
		}
		.footFunction{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 150rpx;
		}
	}

</style>
